<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <meta name=referrer content=never>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <meta http-equiv=X-UA-Compatible content="ie=edge">
  <title>Document</title>
  <link rel=stylesheet href=../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css>
  <link rel=stylesheet href=../css/base.css>
  <link rel=stylesheet href=../css/detail.css>
  <style>
    .num {
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000
    }

    .jian {
      position: absolute;
      top: 0;
      left: 82px
    }

    .jia {
      position: absolute;
      top: 38px;
      left: 82px
    }

    h1 {
            background-color: #fff;
            display: flex;
            height:30px ;
            line-height: 30px;
        }

        h1>i {
            flex: 78%
        }

        h1>a{
            border: 0;
            background-color: #fff;
            flex: 5%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>a:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>a:active{
            background-color: #fff;
            text-decoration: none;
        }
        h1>button{
            border: 0;
            background-color: #fff;
            flex: 6%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>button:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>button:active{
            background-color: #fff;
            text-decoration: none;
        }
  </style>
</head>

<body>
  <h1><i></i> <a href=./reg.html role=button>注册</a>
    <a href=JavaScript:; name=login role=button>登录</a>
    <button name=logout role=button>退出登录</button>
    <button name=cart role=button>购物车</button>
</h1>
  <div class=container></div>
  <script src=../js/jquery.min.js></script>
  <script src=../js/tools.js></script>
  <script src=../js/cookie.js></script>
  <script>
    const cookieObj = myGetCookie();
        $('[name="logout"]').click(function () {
            if (cookieObj.login === undefined) {
                window.alert('对不起您还没登陆');
            } else {
                mySetCookie('login', 1, -1, '/');
                window.alert('您已经成功退出登录');
            }
        });

        $('[name="cart"]').click(function () {
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没登陆，点击跳转登录')) {
                    window.location.href = './login.html';
                }
            } else {
                window.location.href = './cart.html';
            }
        });
        $('[name="login"]').click(function () {
            window.location.href = `./login.html?url=${window.location.href}`;
        });
    let goodsMsg;
    const urlObj = getUrlVal();
    const p = new Promise(function (f, r) {
      $.ajax({
        url: '../server/goods_detail.php',
        type: 'post',
        data: { goods_id: urlObj.goods_id },
        dataType: 'json',
        success: f,
        error: r,
      })
    })
    p.then(function (res) {
      goodsMsg = res;
      console.log(res);
      let str = `
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">商品详细信息</h3>
      </div>
      <div class="panel-body">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="${res.goods_small_logo}" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">${res.goods_name}</h4>
            <p>
              <i class="glyphicon glyphicon-yen"></i>
              <span>${res.goods_price}</span>
            </p>
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default">XL</button>
              <button type="button" class="btn btn-default">L</button>
              <button type="button" class="btn btn-default">M</button>
              <button type="button" class="btn btn-default">S</button>
              <button type="button" class="btn btn-default">XS</button>
            </div>
            <p style="position:relative">
                  <input value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default" >-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
            </p>
            <p>
              <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
              <a name="inCart" href="javascript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
            </p>
          </div>
        </div>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
          <li role="presentation"><a href="#">商品参数信息</a></li>
          <li role="presentation"><a href="#">相关商品</a></li>
        </ul>
        <div>
            ${res.goods_introduce}
        </div>
      </div>
    </div>`
      $('.container').html(str);
    })
    $('.container').click(function (e) {
      if (e.target.getAttribute('name') === 'inCart') {
        const cookieObj = myGetCookie();
        if (cookieObj.login === undefined) {
          if (window.confirm('您还没有登录，点击确定跳转登录')) {
            window.location.href = `./login.html?url=${window.location.href}`;
          }
        } else {

          if (!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= goodsMsg.goods_number - 0)) {
            window.alert(`您输入的数值必须是大于1小于${goodsMsg.goods_number}`);

            if ($('.num').val() - 0 < 1) {
              $('.num').val(1);
              $('[name="-"]').prop('disabled', true);
              $('[name="+"]').prop('disabled', false);
            } else if ($('.num').val() - 0 > goodsMsg.goods_number - 0) {
              $('.num').val(goodsMsg.goods_number);
              $('[name="+"]').prop('disabled', true);
              $('[name="-"]').prop('disabled', false);
            }

            return;
          }

          let cart = localStorage.cart;
          if (cart === undefined) {
            goodsMsg.num = $('.num').val();
            goodsMsg.buy = true;
            const arr = [];
            arr.push(goodsMsg);
            localStorage.cart = JSON.stringify(arr);
          } else {
            cart = JSON.parse(cart);
            let bool = cart.some(function (item) {
              return item.goods_id === goodsMsg.goods_id;
            })
            if (bool) {
              for (let i = 0; i <= cart.length - 1; i++) {
                if (cart[i].goods_id === goodsMsg.goods_id) {
                  cart[i].num++;
                  break;
                }
              }
            } else {
              goodsMsg.num = $('.num').val();
              goodsMsg.buy = true;
              cart.unshift(goodsMsg);

            }
            localStorage.cart = JSON.stringify(cart);
          }
          window.location.href = './cart.html';
        }
      } else if (e.target.getAttribute('name') === '-') {
        if ($('.num').val() === '1') {
          e.target.disabled = true;
          $('.num').val();
        } else {
          $('.num').val($('.num').val() - 1);
        }
        $('[name="+"]').prop('disabled', false);
      } else if (e.target.getAttribute('name') === '+') {
        $('.num').val($('.num').val() - 0 + 1);
        if ($('.num').val() === goodsMsg.goods_number) {
          $('[name="+"]').prop('disabled', true);
        }
        $('[name="-"]').prop('disabled', false);
      }
    })</script>
</body>

</html>